<template>
	<view class="">
		<view class="video-details" v-if="!loading">
			<uv-navbar bg-color="none" @leftClick="leftClick">
				<template slot="left">
					<view class="left-icon">
						<uv-icon name="arrow-left" size="20px" color="#FFF"></uv-icon>
					</view>
				</template>
			</uv-navbar>
			<video id="myVideo" class="video" :src="details.video" :controls="!false" autoplay
				:show-fullscreen-btn="false" :show-play-btn="true" :show-center-play-btn="true"></video>
			<view class="content">{{details.content}}</view>
		</view>
		<uv-loading-page :loading="loading" loading-mode="spinner"></uv-loading-page>
	</view>
</template>

<script>
	import {
		getIsVideoInfo
	} from '@/common/api.js'
	const app = getApp();
	export default {
		data() {
			return {
				loading: false,
				details: {
					video: '',
					content: 1,
				}
			}
		},
		onLoad(e) {
			this.getData(e.id)
		},
		methods: {
			leftClick() {
				app.navigateBack()
			},
			getData(id) {
				this.loading = true
				getIsVideoInfo({
					id
				}).then(res => {
					this.details.video = res.data.videoUrl
					this.details.content = res.data.videoContent
					this.loading = false
				}).catch(err => {
					this.loading = false
				})
			},
			previewImage(index) {
				uni.previewImage({
					current: this.list[index],
					showmenu: true,
					urls: this.list
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.video-details {}

	.video {
		width: 100vw;
		height: 60vh;
		position: relative;
		z-index: 10;
	}

	.content {
		padding: 40rpx;
		box-sizing: border-box;
		font-weight: 500;
		font-size: 28rpx;
		color: #000000;
		line-height: 60rpx;
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		position: relative;
		top: -32rpx;
		z-index: 11;
		background: #FFFFFF;
	}

	.left-icon {
		width: 60rpx;
		height: 60rpx;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding-right: 4rpx;
	}
</style>